<template>
  <div class="search">
    <el-form ref="queryFormRef" :inline="true" onsubmit="event.preventDefault()">
      <el-form-item label="关键字" prop="keywords">
        <el-input placeholder="菜单名称" v-model="sysMenuModel.searchText" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchMenu">搜索</el-button>
        <el-button @click=""> 重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-card shadow="never">
    <template #header>
      <el-button type="success" @click.stop="add({ id: undefined, type: 0 })">新增</el-button>
      <el-button type="danger" v-show="false">删除</el-button>
    </template>

    <el-table :data="menus" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
      <el-table-column prop="name" label="菜单名称" sortable min-width="200" />
      <el-table-column prop="type" label="菜单类型" sortable width="150">
        <template #default="scope">
          <el-text v-if="scope.row.type == 0" type="primary">目录</el-text>
          <el-text v-if="scope.row.type == 1" type="success">菜单</el-text>
          <el-text v-if="scope.row.type == 3" type="info">外链</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="redirect" label="路由路径" sortable width="150" />
      <el-table-column prop="component" label="组件路径" sortable />

      <el-table-column label="状态" align="center" width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.visible == true" type="success">显示</el-tag>
          <el-tag v-else type="info">隐藏</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="sort" label="排序" sortable width="100" />

      <el-table-column fixed="right" align="center" label="操作" width="220">
        <template #default="scope">
          <el-button type="primary" text size="small" @click.stop="add(scope.row)">
            新增
          </el-button>

          <el-button type="primary" text size="small" @click.stop="edit(scope.row)">
            编辑
          </el-button>
          <el-button type="primary" text size="small" @click.stop="deleted(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog v-model="sysMenuModel.dialogTableVisible" :title="sysMenuModel.editTitle" destroy-on-close appendToBody
    width="750px">
    <el-form label-width="100px" :rules="rules" :model="menuInput" ref="ruleFormRef">
      <el-form-item label="父级菜单" prop="parentId">
        <el-tree-select placeholder="选择上级菜单" filterable check-strictly :render-after-expand="false"
          :data="treeSelectNodes" v-model="menuInput.parentId" />
      </el-form-item>

      <el-form-item label="菜单名称" prop="name">
        <el-input placeholder="请输入菜单名称" v-model="menuInput.name" />
      </el-form-item>

      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="menuInput.type">
          <el-radio :label="0">目录</el-radio>
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="3">外链</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="menuInput.type == 3" label="外链地址" prop="path">
        <el-input placeholder="请输入外链完整路径" v-model="menuInput.path" />
      </el-form-item>

      <el-form-item label="路由路径" prop="redirect" v-if="menuInput.type == 0 || menuInput.type == 1">
        <el-input v-if="true" placeholder="/system  (目录以/开头)" v-model="menuInput.redirect" />
        <el-input v-else placeholder="user" v-model="menuInput.redirect" />
      </el-form-item>

      <!-- 组件页面完整路径 -->
      <el-form-item v-if="menuInput.type == 1" label="页面路径" prop="component">
        <el-input placeholder="system/user/index" style="width: 95%" v-model="menuInput.component">
          <template v-if="true" #prepend>src/views/</template>
          <template v-if="true" #append>.vue</template>
        </el-input>
      </el-form-item>

      <el-form-item label="图标" prop="icon" v-if="true">
        <!-- 图标选择器 -->
        <!-- <icon-select v-model="menuInput.icon" /> -->
      </el-form-item>

      <el-form-item label="跳转路由" v-if="menuInput.type == 0" prop="redirect">
        <el-input placeholder="跳转路由" v-model="menuInput.redirect" />
      </el-form-item>

      <el-form-item label="状态" v-if="true">
        <el-radio-group v-model="menuInput.visible">
          <el-radio :label="true">显示</el-radio>
          <el-radio :label="false">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number style="width: 100px" controls-position="right" :min="0" v-model="menuInput.sort" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="commit">确 定</el-button>
        <el-button @click.stop="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { IMenu, SysMenuModel, menusConvert, getRules } from '@/api/menu/type';
import { ref, inject, reactive } from 'vue';
import { getSysMenu, updateSysMenu, addSysMenu, deleteSysMenu } from '@/api/menu';
import { ConfirmDialog, ISelectTreeNode, validateForm } from "@/utils/common";
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 验证规则
const rules = getRules();
// 页面信息
const sysMenuModel = reactive(new SysMenuModel());
// sysMenu加载
const menus = ref<IMenu[]>([]);
// 菜单选中
const treeSelectNodes = ref<ISelectTreeNode[]>([]);
// 编辑菜单数据
const menuInput = reactive<IMenu>({ id: 0, type: 0 });
// 获取目录刷新发方法
const refashMenu = inject("refashMenu", async () => { });
// 表单实例
const ruleFormRef = ref<FormInstance | null>(null)

const searchMenu = async () => {
  const sysMenuData = await getSysMenu({ isVisible: true });
  menus.value = sysMenuData.data;
  treeSelectNodes.value = menusConvert(sysMenuData.data);
};
searchMenu();

const add = (m: IMenu) => {
  sysMenuModel.dialogTableVisible = true;
  sysMenuModel.editTitle = "新增";

  menuInput.parentId = m.id;
  menuInput.name = "";
  menuInput.type = m.type;
  menuInput.redirect = "";
  menuInput.redirectUrl = "";
  menuInput.sort = 0;
  menuInput.visible = 1;
  menuInput.component = "";
  menuInput.icon = "";
  menuInput.path = "";
};

const edit = (m: IMenu) => {
  sysMenuModel.dialogTableVisible = true;
  sysMenuModel.editTitle = "编辑";

  menuInput.id = m.id;
  menuInput.parentId = m.parentId;
  menuInput.name = m.name;
  menuInput.type = m.type;
  menuInput.redirect = m.redirect;
  menuInput.redirectUrl = m.redirectUrl;
  menuInput.sort = m.sort;
  menuInput.visible = m.visible;
  menuInput.component = m.component;
  menuInput.icon = m.icon;
  menuInput.path = m.path;
};

const deleted = (menuId: number) => {
  ConfirmDialog("确认删除?",
    async () => {
      await deleteSysMenu([menuId]);

      ElMessage({
        type: 'success',
        message: '删除成功',
      });

      await searchMenu();
      await refashMenu();
    },
    () => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      });
    });
}

const closeDialog = () => {
  sysMenuModel.dialogTableVisible = false;
}

const commit = () => {
  validateForm(ruleFormRef).then(async () => {
    if (sysMenuModel.editTitle == "编辑") {
      await updateSysMenu(menuInput);
      await searchMenu();
      await refashMenu();
    } else if (sysMenuModel.editTitle = "新增") {
      await addSysMenu(menuInput);
      await searchMenu();
      await refashMenu();
    }
    closeDialog();
  })
}
</script>

<style scoped>
h1 {
  margin: 0;
  padding: 0;
}
</style>